<template>
  <div class="contentMng">
    <!--头部查找-->
    <el-row>
      <el-col :span="5">
        <div class="grid-content bg-purple-dark">
          <el-input
            v-model="title"
            style="width:255px;"
            placeholder="内容"
            size="small"
          >
            <el-button @click="search" slot="append">搜索</el-button>
          </el-input>
        </div>
      </el-col>
      <!-- <el-col :span="3" :offset="16">
        <div class="grid-content bg-purple-dark">
          <el-button type="primary" size="small" @click="dialogVisible = true"
            >批量删除</el-button
          >
        </div>
      </el-col> -->
    </el-row>
    <!--动态头条表格列-->
    <el-table
      class="dyNewList"
      :data="list"
      border
      style="width: 100%;margin-top:5px;"
      :height="tableHeight"
    >
      <!-- <el-table-column
        type="selection"
        width="50"
        align="center"
        class="item"
      ></el-table-column> -->
      <el-table-column type="index" width="50"> </el-table-column>
      <el-table-column
        label="头像"
        width="120"
        align="center"
        class="headPhoto"
      >
        <template slot-scope="scope">
          <img
            style="width:60px; height:60px;object-fit:cover; border-radius:50%;"
            :src="scope.row.avatar"
            alt=""
          />
        </template>
      </el-table-column>
      <el-table-column
        prop="nickname"
        label="用户名"
        width="120"
        align="center"
      ></el-table-column>
      <el-table-column label="图片/视频" align="center">
        <template slot-scope="scope">
          <img
            @click="imgPreview(scope.row.links)"
            style="width:100px; height:60px;object-fit:cover;"
            :src="scope.row.links + '?x-oss-process=video/snapshot,t_0,m_fast'"
            alt=""
          />
        </template>
      </el-table-column>
      <el-table-column
        prop="describe"
        label="内容"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="like"
        label="点赞"
        width="120"
        align="center"
      ></el-table-column>
      <!-- <el-table-column
        prop="handle"
        label="评论"
        width="50"
        align="center"
      ></el-table-column> -->
      <el-table-column label="发布时间" width="150" align="center">
        <template slot-scope="scope">
          {{ scope.row.created_at.date.split(".")[0] }}
        </template>
      </el-table-column>
      <el-table-column prop="handle" label="操作" width="100" align="center">
        <template slot-scope="scope">
          <el-button
            @click="deleteDynamic(scope.row.id)"
            type="info"
            size="mini"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <div class="paging">
      <div></div>
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="page"
        :page-size="size"
        layout="total, prev, pager, next"
        :total="total"
        :background="true"
      >
      </el-pagination>
    </div>
    <el-dialog :visible.sync="dialogVisible" append-to-body>
      <video width="100%" :src="dialogImageUrl" controls></video>
    </el-dialog>
  </div>
</template>

<script>
import { getDynamicList, deleteDynamic } from "@/api/dynamic-mng";
export default {
  name: "ContentMng",
  data() {
    return {
      title: "",
      list: [],
      dialogVisible: false,
      searchStr: "",
      total: 0,
      size: 0,
      page: 1,
      tableHeight: 0,
      dialogVisible: false,
      dialogImageUrl: ""
    };
  },
  methods: {
    imgPreview(img) {
      this.dialogImageUrl = img;
      this.dialogVisible = true;
    },
    deleteDynamic(id) {
      this.$confirm("确认删除该动态?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        deleteDynamic({ id }).then(res => {
          if (res.code === 200) {
            this.getDynamicList(this.page);
            this.$message({
              type: "success",
              message: "删除成功!"
            });
          }
        });
      });
    },
    search() {
      this.getDynamicList(1);
    },
    getDynamicList(page) {
      getDynamicList({
        page,
        is_verify:1,
        condition: this.title ? this.title : undefined
      }).then(res => {
        if (res.code === 200) {
          this.list = res.data.data;
          this.total = res.data.total;
          this.page = res.data.current_page;
          this.size = res.data.per_page;
        }
      });
    },
    handleCurrentChange(page) {
      this.getDynamicList(page);
    },
    changeSize() {
      this.tableHeight = document.body.clientHeight - 200;
      window.onresize = () => {
        this.changeSize();
      };
    }
  },
  created() {
    this.getDynamicList(1);
    this.changeSize();
  }
};
</script>

<style lang="scss" scoped>
.contentMng {
  // width: 98%;
  margin-left: 20px;
  margin-top: 20px;
  .dyNewList {
    overflow: auto;
    margin-top: 20px;
    .sort {
      display: inline-block;
      width: 80px;
      height: 25px;
      line-height: 25px;
      border: 1px solid #eeeeee;
    }
    .el-table_1_column_3 {
      .cell {
        text-align: center;
      }
      .headPhoto {
        overflow: hidden;
        display: inline-block;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background-color: #eeeeee;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  .paging {
    float: right;
    margin-top: 20px;
  }
}
</style>
